<template>
  <view class="glo-search">
    <glo-input v-model="keyword" :placeholder="placeholder" :show-scan="showScan" @clear="onClear" @scan="onScan" @search="onSearch"></glo-input>
    <text class="search-text" @click="onSearch">查询</text>
    <sc-flex v-if="showFilter" ai="center" col-gap="15" shrink="0" @click="onFilter">
      <text class="search-type">筛选</text>
      <sc-image height="26" src="/static/imgs/ic_shaixuan.png" width="26"></sc-image>
    </sc-flex>
  </view>
</template>
<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请输入关键字搜素"
  },
  showScan: {
    type: Boolean,
    default: false
  },
  showFilter: {
    type: Boolean,
    default: false
  }
});
const keyword = ref(props.modelValue);
const emits = defineEmits(["update:modelValue", "search", "filter", "scan", "clear"]);
const onSearch = () => {
  emits("update:modelValue", keyword.value);
  emits("search", keyword.value);
};
const onFilter = () => {
  emits("filter");
};
const onScan = () => {
  emits("scan");
};
const onClear = () => {
  emits("clear");
};
</script>
<style lang="scss" scoped>
.glo-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30rpx;
}

.search-text {
  flex-shrink: 0;
  color: #3d3d3d;
  font-weight: 500;
  font-size: 26rpx;
  line-height: 26rpx;
}

.search-type {
  flex-shrink: 0;
  color: #3d3d3d;
  font-weight: 500;
  font-size: 26rpx;
  line-height: 26rpx;
}
</style>
